<template>
  <div style="width: 310mm;margin: 0 auto; padding: 60px 0;">
    <div ref="print">
      <div style="font-size: 24px;text-align: center;">金华眼科医院屈光发育检查报告单</div>

      <div class="print-moudle" v-if="checkList.length">
        <span class="print-title" style="float: left;">人员基本信息</span>
        <el-button type="info" class="noprint" style="float: right;" @click="printHandle">打印</el-button>
        <div style="clear: both;"></div>
        <hr />
        <el-row>
          <el-col :span="6">
            <span>姓名：</span>
            <span>{{personInfo.name}}</span>
          </el-col>
          <el-col :span="6">
            <span>姓别：</span>
            <span v-if="personInfo.gender == '0'">男</span>
            <span v-if="personInfo.gender == '1'">女</span>
          </el-col>
          <el-col :span="6">
            <span>出生年月：</span>
            <span>{{personInfo.birthDay}}</span>
          </el-col>
          <el-col :span="6">
            <span>民族：</span>
            <span>{{valueChangeName(personInfo.nation,nationalList)}}</span>
          </el-col>
          <!-- <el-col :span="6">
            <span>家长姓名：</span>
            <span>{{personInfo.personExtProp.fatherName || personInfo.personExtProp.motherName}}</span>
          </el-col> -->
          <el-col :span="6">
            <span>联系电话：</span>
            <span>{{personInfo.telPhone}}</span>
          </el-col>
          <el-col :span="6">
            <span>就诊卡号：</span>
            <span>{{checkList[0].optometry.cardNum}}</span>
          </el-col>
          <el-col :span="12">
            <span>家庭住址：</span>
            <span>{{personInfo.address}}</span>
          </el-col>
        </el-row>
      </div>

      <div v-for="(item,index) in checkList" :key="'check'+index" style="margin-top: 20px;">
        <div class="print-moudle">
          <el-row>
            <el-col :span="4"><span class="print-title">体检详细信息 </span></el-col>
            <el-col :span="5"><span class="print-title">第({{item.optometry.checkNumber}})次体检</span></el-col>
            <el-col :span="4">
              <span>主检医生：</span>
              <span>{{item.optometry.checkDoctorName}}</span>
            </el-col>
            <el-col :span="5">
              <span>主检部门：</span>
              <span>{{item.optometry.deptName}}</span>
            </el-col>
            <el-col :span="5">
              <span>体检时间：</span>
              <span>{{item.optometry.checkDate}}</span>
            </el-col>
          </el-row>
          <hr />
          <el-row>
            <el-col :span="6">
              <span>身高：</span>
              <span v-if="item.optometry.height">{{item.optometry.height}}CM</span>
            </el-col>
            <el-col :span="6">
              <span>体重：</span>
              <span v-if="item.optometry.weight">{{item.optometry.weight}}Kg</span>
            </el-col>
            <el-col :span="6">
              <span>握笔姿势：</span>
              <span v-if="item.optometry.pencilGrasps == '0'">正确</span>
              <span v-if="item.optometry.pencilGrasps == '1'">错误</span>
            </el-col>
            <el-col :span="6">
              <span>色觉：</span>
              <span v-if="item.optometry.colorVision == '0'">正常</span>
              <span v-if="item.optometry.colorVision == '1'">色弱</span>
              <span v-if="item.optometry.colorVision == '2'">色盲</span>
            </el-col>
            <el-col :span="6">
              <span>习惯用手：</span>
              <span v-if="personInfo.personExtProp.habitHand == 'Y'">右手</span>
              <span v-if="personInfo.personExtProp.habitHand == 'Z'">左手</span>
            </el-col>
            <el-col :span="6">
              <span>集合近点：</span>
              <span v-if="item.optometry.nearPoint">{{item.optometry.nearPoint}}cm</span>
            </el-col>
            <el-col :span="6">
              <span>优势眼：</span>
              <span v-if="item.optometry.masterEye == '0'">右眼</span>
              <span v-if="item.optometry.masterEye == '1'">左眼</span>
            </el-col>
            <el-col :span="6">
              <span>眼位：</span>
              <span v-if="item.optometry.eyePosition == '0'">正位</span>
              <span v-if="item.optometry.eyePositionCrypticInfo == '1'">内</span>
              <span v-if="item.optometry.eyePositionCrypticInfo == '2'">外</span>
              <span v-if="item.optometry.eyePositionCrypticInfo == '3'">上</span>
              <span v-if="item.optometry.eyePositionCrypticInfo == '4'">下</span>
              <span v-if="item.optometry.eyePosition == '1'">隐斜</span>
              <span v-if="item.optometry.eyePositionInfo == '1'">内</span>
              <span v-if="item.optometry.eyePositionInfo == '2'">外</span>
              <span v-if="item.optometry.eyePositionInfo == '3'">上</span>
              <span v-if="item.optometry.eyePositionInfo == '4'">下</span>
              <span v-if="item.optometry.eyePosition == '2'">显斜</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px;">
            <el-col :span="24">
              <table class="print-table">
                <tr>
                  <th style="width: 120px;">检查项目</th>
                  <th style="width: 120px;">右眼</th>
                  <th style="width: 120px;">左眼</th>
                  <th style="width: 120px;" class="border-right">参考值</th>
                  <th style="width: 120px;">检查项目</th>
                  <th style="width: 120px;">右眼</th>
                  <th style="width: 120px;">左眼</th>
                  <th style="width: 120px;">参考值</th>
                </tr>
                <template v-for="(item1,index1) in item.checkDataValues">
                  <tr v-if="index1%2 == 0">
                    <td>{{item1.chName}}</td>
                    <td>{{item1.odValue}}</td>
                    <td>{{item1.osValue}}</td>
                    <td class="border-right">{{item1.standardValue}}</td>
                    <td v-if="index1 == item.checkDataValues.length - 1" :colspan="4"></td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].chName}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].odValue}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].osValue}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].standardValue}}</td>
                  </tr>
                </template>

              </table>
            </el-col>
          </el-row>
        </div>

        <div>
          <div class="print-title">结论</div>
          <hr />
          <div class="conclusion">
            <div class="conclusion-item">
              <span>屈光状态：</span>
              <span>{{statusChangeName(item.optometry.refractiveStatus,refractiveOption)}}</span>
            </div>
            <div class="conclusion-item">
              <span>近视预警：</span>
              <span v-if="item.optometry.myopiaWarning == 'R'">红色</span>
              <span v-if="item.optometry.myopiaWarning == 'Y'">黄色</span>
              <span v-if="item.optometry.myopiaWarning == 'B'">蓝色</span>
            </div>
            <div class="conclusion-item">
              <span>眼病：</span>
              <span>{{item.optometry.eyeDisease}}</span>
            </div>
          </div>
        </div>

        <!-- 影像列表 -->
        <div style="width: 100%;text-align: center;">
        	<template v-for="(imgItem,imgIndex) in item.images">
        		<img :src="imgItem.path" alt="" style="max-width: 100%;display: block;">
        	</template>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { fetchNationalList } from '@/api/admin/national'
  import { getReportDataByPerson } from '@/api/pvm/arcoptometry'

  export default {
    data() {
      return {
        personInfo: {},
        checkList: [],
        optometry: {},
        checkDataValues: [],
        nationalList: [],
        refractiveOption: []
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(id){
        this.$nextTick(() => {
          remote('refractive_status').then(result => {
            this.refractiveOption = result.data.data
          })
          this.getNationalList().then(result => {
            getReportDataByPerson(id).then(response => {
              let resultData = response.data.data
              this.checkList = response.data.data
              console.log(this.checkList)

              if(this.checkList.length){
                this.personInfo = this.checkList[0].personInfo
              }else{
                this.personInfo = {}
              }
              // this.optometry = resultData.optometry
              // this.checkDataValues = resultData.checkDataValues
            })
          })
        })
      },
      printHandle() {
        this.$print(this.$refs.print)
      },
      // 获取民族列表
      async getNationalList(){
        await fetchNationalList({ current: 1, size: 100 }).then(result => {
          this.nationalList = result.data.data.records
        })
      },
      //
      valueChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.id == value || item.value == value){
            return item
          }
        })
        if(obj && obj.name){
          return obj.name
        }
      },
      statusChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.value == value){
            return item
          }
        })
        if(obj && obj.label){

          return obj.label
        }
      }
    }
  }
</script>

<style>
  @media print {
    .noprint {
      display: none !important;
    }
  }
</style>
<style lang="scss" scoped>
  .print-moudle {
    margin-bottom: 20px;
  }

  .print-title {
    font-size: 18px;
    font-weight: 700;
  }

  .print-table {
    width: 90%;
    th {
      border-top: solid 1px #efefef;
      background-color: #f4f5f7
    }
    tr {
      border-bottom: solid 1px #efefef;
    }
    tr th, tr td {
      padding: 10px 3px;
      // border: solid 1px #e7e7e7;
      text-align: center;
    }
    .border-right {
      border-right: solid 1px #e7e7e7;
    }
  }

  .conclusion {
    display: flex;
  }

  .conclusion-item {
    margin-right: 15px;
  }
</style>
